<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <title>Sakila Management System</title>
    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="../../../css/bootstrap.min.css" type="text/css" th:href="@{/css/bootstrap.min.css}"/>

    <!-- Custom Fonts -->
    <link rel="stylesheet" href="../../../font-awesome/css/font-awesome.min.css" type="text/css" th:href="@{/css/font-awesome.min.css}"/>

    <!-- Plugin CSS -->
    <link rel="stylesheet" href="../../../css/animate.min.css" type="text/css" th:href="@{/css/animate.min.css}"/>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="../../../css/creative.css" type="text/css" th:href="@{/css/creative.css}"/>

    <!-- side bar -->
    <link rel="stylesheet" href="../../../css/sidebar.css" th:href="@{/css/sidebar.css}" />

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body id="page-top">

    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">Sakila Management System</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                	<li sec:authorize="hasRole('ROLE_STAFF')">
						<form action="#" method="post" th:action="@{/staff/logout}">
							<input type="submit" value="Logout" class="btn btn-default"/>
						</form>
					</li>
					<li sec:authorize="hasRole('ROLE_STAFF')">
						<a class="btn" data-action="toggle" data-side="left" href="javascript:void(0)"><span sec:authentication="principal.staff.name">Member Name</span></a>
					</li>
                    <li>
                        <a class="page-scroll" href="../rental/add.html" th:href="@{/staff/goto_addRental}">New Order</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="../rental/index.html" th:href="@{/staff/goto_viewOrder}">Order Manage</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="../film/film.html" th:href="@{/staff/goto_viewFilms}">Film Manage</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="../member/index.html" th:href="@{/staff/goto_memberManage}">Customer Manage</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <header>
        <div class="header-content">
            <div class="header-content-inner">
                <h1>Your Favorite Source of Free Bootstrap Themes</h1>
                <hr />
                <p>Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!</p>
                <a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a>
            </div>
        </div>
    </header>

    <section class="no-padding" id="portfolio">
        <div class="container-fluid">
            <div class="row no-gutter">
                <div class="col-lg-4 col-sm-6">
                    <a href="rental/add.html" class="portfolio-box" th:href="@{goto_addRental}">
                        <img src="../../../images/portfolio/1.jpg" class="img-responsive" alt="" th:src="@{/images/portfolio/1.jpg}"/>
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    
                                </div>
                                <div class="project-name">
                                    Create New Rental and Payment
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <a href="rental/index.html" class="portfolio-box" th:href="@{goto_viewOrder}">
                        <img src="../../../images/portfolio/2.jpg" class="img-responsive" alt="" th:src="@{/images/portfolio/2.jpg}"/>
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    
                                </div>
                                <div class="project-name">
                                    Rental and Payment Manage
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <a href="film/film.html" th:href="@{goto_viewFilms}" class="portfolio-box">
                        <img src="../../../images/portfolio/3.jpg" class="img-responsive" alt="" th:src="@{/images/portfolio/3.jpg}"/>
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    
                                </div>
                                <div class="project-name">
                                    Film and Inventory Manage
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <a href="member/index.html" class="portfolio-box" th:href="@{goto_memberManage}">
                        <img src="../../../images/portfolio/4.jpg" class="img-responsive" alt="" th:src="@{/images/portfolio/4.jpg}"/>
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    
                                </div>
                                <div class="project-name">
                                    Customer Manage
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-sm-6" sec:authorize="hasRole('ROLE_MANAGER')">
                    <a href="admin/index.html" class="portfolio-box" th:href="@{admin/goto_viewStaff}">
                        <img src="../../../images/portfolio/5.jpg" class="img-responsive" alt="" th:src="@{/images/portfolio/5.jpg}"/>
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    
                                </div>
                                <div class="project-name">
                                    Staff Manage
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-sm-6" sec:authorize="hasRole('ROLE_MANAGER')">
                    <a href="#" class="portfolio-box">
                        <img src="../../../images/portfolio/6.jpg" class="img-responsive" alt="" th:src="@{/images/portfolio/6.jpg}"/>
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Category
                                </div>
                                <div class="project-name">
                                    Project Name
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <aside class="bg-dark">
        <div class="container text-center">
            <div class="call-to-action">
                
            </div>
        </div>
        
        <!-- Side Bar -->
            <div class="sidebar left">
            	  <ul style="position: relative; top: 55px;left:20px;" class="list-group list-unstyled">
            	    <li class="list-group"><img src="../../../images/no-pic.jpg" class="img-circle" 
            	  		th:src="@{'/images/staff_' + ${#authentication.principal.staff.id} + '.jpg'}"
            	  		th:onerror="'this.src=\'' + @{/images/no-pic.jpg} + '\';'" /></li>
            	    <li class="list-group"><h4 sec:authentication="principal.staff.name">Member Name</h4></li>
            	    <li class="list-group"><a href="#" class="btn btn-info" th:href="@{/staff/goto_changePassword}">Change Password</a></li>
            	    <li class="list-group"><a href="#" class="btn btn-info" th:href="@{/staff/goto_changeAvatar}">Change Avatar</a></li>
            	    <li sec:authorize="hasRole('ROLE_MANAGER')" class="list-group"><a href="#" class="btn btn-info" th:href="@{/staff/admin/goto_addStaff}">Add Staff</a></li>
            	  </ul>  	
            </div>
    </aside>
    
    <!-- jQuery -->
    <script src="../../../script/jquery-2.1.4.min.js" th:src="@{/script/jquery-2.1.4.min.js}"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="../../../script/bootstrap.min.js" th:src="@{/script/bootstrap.min.js}"></script>

    <!-- Plugin JavaScript -->
    <script src="../../../script/jquery.easing.min.js" th:src="@{/script/jquery.easing.min.js}"></script>
    <script src="../../../script/jquery.fittext.js" th:src="@{/script/jquery.fittext.js}"></script>
    <script src="../../../script/wow.min.js" th:src="@{/script/wow.min.js}"></script>

    <!-- Custom Theme JavaScript -->
    <script src="../../../script/creative.js" th:src="@{/script/creative.js}"></script>

    <script src="../../../script/jquery.sidebar.min.js" th:src="@{/script/jquery.sidebar.min.js}"></script>
    <script src="../../../script/sidebar.js" th:src="@{/script/sidebar.js}"></script>
</body>
</html>
